import React, { useCallback, useMemo, useState, useTransition } from 'react'

const App = () => {

  /*
    isPen: 是用来做标记用的，当标记的值为真，那么就代表有其他的更新，自身数据就先不更新
           优先更新其他内容
    startTransition：是用来开启优先更新其他内容，当其他内容更新完成后才会做自身更新
  */ 
    // useTransition：优先更新其他内容，自身等待所有更新完毕后才会更新
    // useTransition 是一个让你在不阻塞 UI 的情况下，来更新状态的 React Hook。
    const [isPen, startTransition] = useTransition()
    const [count,setCount] = useState(100)

    function btnClick(){

      // 开启非阻塞，当有其他数据更新的时候，优先更新其他数据
      startTransition(()=>{
        // 当前要更新，当正在更新的时候会讲 isPen 的值设置为 true 
        setCount(count + 1)
      })

      
    }
    return (
      <div >
        
        
        <button onClick={btnClick}>点击切换{count}</button>

        {isPen && <div>1234567890</div>}

      </div>
  )
}

export default App